import {useState} from 'react'
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux'
import { Input,Button,Tabs,Swiper,Badge, TabBar,
    Random,SearchBar,InfiniteScroll, List,
} from 'antd-mobile/2x'
import { sleep } from 'antd-mobile/es/utils/sleep'
// import { Mockjs } from 'mockjs'
import '../renmin/xialan'
import Xialan from '../renmin/xialan'
import '../css/xinwen.css'
import tu1 from '../img/logo.jpg'
import tu2 from '../img/tou.gif'


import Mock from 'mockjs'
import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
  } from 'antd-mobile-icons'

//   let abc = Mock.mock({
//     "string|1-10": "★"
//   })
    // Random.sentence(3, 5)

    let abc= Mock.mock('@csentence(15,20)')
    let f= Mock.mock('@csentence(7)')
    let d= Mock.mock('@image(150x70)')
    let t= Mock.mock('@string("number", 1,2)')
    let g= Mock.mock('@string("number", 1,3)')

    // let d= Random.image('200x100', '#894FC4', '#FFF', 'png', '!')
    // console.log(abc)
    // console.log(f)
    // console.log(d)
    // console.log(t)
    // console.log(d)
    // let count=0;
const Xinwen=()=>{
    // if (count >= 5) {
    //     return []
    //   }
    //   await sleep(2000)
    //   count++
    const [key,setKey]=useState(1)

    // const [hasMore, setHasMore] = useState(true)

    // const loadMore = function(){
    //     console.log(666);
    // }

  
     return(
         <>
         <div className='logo'>
            <div className='htop'>
              <div className='img1'>
                <img src={tu1} /> 
              </div>
              {/* <img src={tu2}/> */}
              <div className='img2'>
                  <img src={tu2}/>
                </div>
                
                <div>
                    <SearchBar placeholder='尼加拉瓜宣布与台湾“断交”' />
                </div>

               
            </div>
                <Tabs onChange={key=>setKey(key)}>
                    <Tabs.Tab title='推荐' key='1' />
                    <Tabs.Tab title='热点' key='2' />
                    <Tabs.Tab title='视频' key='3' />
                    <Tabs.Tab title='锐评' key='4' />
                    <Tabs.Tab title='问政' key='5' />
                    <Tabs.Tab title='云课堂' key='6' />
                </Tabs>
                </div>
               {/* <xialan></xialan> */}
                <div className='hct'>
                    {key=='1'&&(
                       <List>

                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                          <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                            


                          
            
                       </List>
                       
                        
                    )}
                    {/* <InfiniteScroll loadMore={loadMore} hasMore={hasMore} /> */}
                    {key=='2'&&(
                        <div>
                            <Swiper>
                                <Swiper.Item>
                                    <div className='lukuotu'>1</div>
                                </Swiper.Item>
                                <Swiper.Item>
                                    <div className='lukuotu'>2</div>
                                </Swiper.Item>
                                <Swiper.Item>
                                    <div className='lukuotu'>3</div>
                                </Swiper.Item>
                                <Swiper.Item>
                                    <div className='lukuotu'>4</div>
                                </Swiper.Item>
                            </Swiper>
                             {/* ------------------------------ */}
                            <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                           {/* ------------------------------ */}
                           <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                           {/* ------------------------------ */}
                           <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                           {/* ------------------------------ */}
                           <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                           {/* ------------------------------ */}
                           <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                           {/* ------------------------------ */}
                           <div className='yi'>
                              <div className='zi'>
                                <div className='a'>
                                {abc}
                                </div>
                                <div className='b'>
                                    {f}
                                </div>
                                <div className='c'>{t}小时前</div>
                                <div className='i'>{g}评</div>
                              </div>
                              <div className='tu'>
                               <img src={d} />
                            </div>
                            <br />
                          </div>
                        </div>
                       
                        
                    )}
                </div>
        </>
          
        )
  
                          }      // ReactDOM.render(abc,document.getElementById('root'))
//         let count = 0

// async function mockRequest() {
//   if (count >= 5) {
//     return []
//   }
//   await sleep(2000)
//   count++
//   return [
//     'A',
//     'B',
//     'C',
//     'D',
//     'E',
//     'F',
//     'G',
//     'H',
//     'I',
//     'J',
//     'K',
//     'L',
//     'M',
//     'N',
//     'O',
//     'P',
//     'Q',
//   ]
// }

      
// }
// export default () => {
//     const [data, setData] = useState<string[]>([])
//     const [hasMore, setHasMore] = useState(true)
//     async function loadMore() {
//       const append = await mockRequest()
//       setData(val => [...val, ...append])
//       setHasMore(append.length > 0)
//     }
  
//     return (
//       <>
//         <List>
//           {data.map((item, index) => (
//             <List.Item key={index}>{item}</List.Item>
//           ))}
//         </List>
//         <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
//       </>
//     )
//   }
export default Xinwen